<template>
  <div class="app-container">
    <br />

    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>
            <span @click="goFiest()">回到一级分类</span>
          </el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in nextArr" :key="index">
        <span @click="handle(item, index)">{{ item.name }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 按钮 -->
    <br />
    <el-button type="primary" icon="el-icon-delete" @click="delAll()"
      >批量删除</el-button
    >
    <el-button type="primary" icon="el-icon-add" @click="dialogFormVisible = true;goodsCat={}"
      >添加</el-button
    >
    <br />

    <br />
    <!-- 类目列表 -->
    
    <el-table
      :data="catList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="cid" label="分类ID" width="120"> </el-table-column>
      <el-table-column prop="name" label="分类名称"></el-table-column>
      <el-table-column prop="tid" label="模板ID"></el-table-column>
      <el-table-column prop="brands" label="模板关联品牌">
        <template slot-scope="scope">
                  <div>{{scope.row.brands|jsonFormat('name')}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="spec" label="模板关联规格">
        <template slot-scope="scope">
                  <div>{{scope.row.spec|jsonFormat('name')}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleNext(scope.row)" type="primary" size="small"
            >查看下个分类</el-button
          >
          <el-button @click="handleEdit(scope.row)" type="primary" size="small"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <br />
    <div class="block">
      <el-pagination
        style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchMap.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加 -->
    <el-dialog
      title="类目编辑"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
    
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>
            <span >一级分类</span>
          </el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in nextArr" :key="index">
        <span >{{ item.name }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
   
      <el-form :model="goodsCat">
      
          <el-form-item label="分类名称" >
          <el-input v-model="goodsCat.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择模板" >
          <el-select v-model="goodsCat.templateId" placeholder="请选择">
            <el-option
              v-for="item in temls"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { search, del,get,save } from "@/api/cat";
export default {
  data() {
    return {
      catList: [], //分类列表
      total: 0,
      searchMap: {
        page: 1,
        limit: 5,
        data: 0,
      },
      dialogFormVisible: false,
      nextArr: [], //面包屑数组
      viewCatEmpl: {}, //view视图实体
      temls:[],//所有模板
      goodsCat:{},//实体
      ids:[],
    };
  },
  methods: {
    //搜索
    searchTable() {
      search(this.searchMap).then((res) => {
        this.catList = res.data;
        this.total = res.total;
      });
    },
    //查看下一分类
    handleNext(row) {
      this.searchMap.data = row.cid;
      this.nextArr.push(row);
      this.searchTable();
    },
    //回到一级分类
    goFiest() {
      this.searchMap.data = 0;
      this.searchTable();
      this.nextArr = [];
    },
    //处理面包屑
    handle(item, index) {
      if(item){
              if(index==0){//点第二个面包屑
                     this.searchMap.data=item.cid;
                     this.nextArr.splice(index+1,1)
                     this.searchTable()

              }else{
                      this.searchMap.data=item.cid;
                      this.searchTable()
              }
          }else{//点查看一级分类
              this.searchMap.data=0;
              this.nextArr=[];
              this.searchTable()
          }
    },
    //获取模板列表
    getTeml(){
      get().then((res)=>{
        console.log(1)
        this.temls=res.data
    })
    },
    //修改
    handleEdit(row) {
      this.dialogFormVisible = true;
      this.$set(this.goodsCat,"id",row.cid)
      this.$set(this.goodsCat,"name",row.name)
      this.$set(this.goodsCat,"templateId",row.tid)
      // this.goodsCat.id = row.cid;
      // this.goodsCat.name=row.name;
      // this.goodsCat.templateId=row.tid;
    },
    //添加
  
    saveDate(){
      if(this.nextArr.length==0){
        this.goodsCat.parentId=0
      }else{
        this.goodsCat.parentId=this.nextArr[this.nextArr.length-1].cid
      }
      save(this.goodsCat).then(res=>{
        if(res.success){
          this.searchTable()
            this.$message({
              message: res.msg,
              type: "success",

            })
        }else{
          this.$message({
              message: res.msg,
              type: "error",
            });
        }
        this.dialogFormVisible=false
      })
    },
    //批量删除
    handleSelectionChange(val) {
       var _this=this
      this.viewCatEmpl = val;
      this.viewCatEmpl.forEach(item => {
          _this.ids.push(item.cid)
      });
    },
    delAll() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        del(this.ids).then((res) => {
          if (res.success) {
            this.searchTable()
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      });
    },
    handleSizeChange(size) {
      this.searchMap.limit = size;
      this.searchTable();
    },
    handleCurrentChange(currentPage) {
      this.searchMap.page = currentPage;
      this.searchTable();
    },
  },
  created() {
    this.searchTable();
    this.getTeml();
  },
  filters: {
    jsonFormat(source,key){
      // console.log(source)
      if(!source){
        return '---'
      }else{
        var obj = eval("["+source+"]");
        console.log(obj)
        var arr=[]
        obj.forEach(item => {
          arr.push(item[key])
        });
        console.log(arr)
        return arr.join(",")
      }
    }
  }
};
</script>